<template>
	<view>
		<zmm-watermark :watermark="userStore.watermark" v-if="userStore.watermark"></zmm-watermark>
		<view class="content detail">
			<!--反馈建议-->
			<view class="detail-item">
				<view class="detail-content formRef">
					<uni-forms ref="formRef" :model="formData" :rules="formRules" labelWidth="100px">
					  <uni-forms-item label="反馈建议" name="advice" required>
					    <uni-easyinput v-model="formData.advice" placeholder="请输入反馈建议" />
					  </uni-forms-item>
					  <uni-forms-item label="反馈建议图片" name="adviceImg">
							<up-upload
								:fileList="fileList"
								@afterRead="afterRead"
								@delete="deletePic"
								name="1"
								multiple
								:maxCount="1"
								></up-upload>
					    <uni-easyinput style="display: none;" v-model="formData.adviceImg" placeholder="反馈建议图片" />
					  </uni-forms-item>
					</uni-forms>
					<button type="primary" :disabled="isSubmit" :loading="isSubmit" @click="submit">提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, onMounted, ref } from 'vue';
import { tab, auth, modal } from "@/plugins"
import { getTitle } from "@/utils/getter"
import { checkPermi, checkRole, checkOnlyPermi, checkOnlyRole } from "@/utils/permission"
import useUserStore from '@/store/modules/user'
import { timeFormat } from 'uview-plus'
import { adviceAdd, adviceDetail } from "@/api/erp_api/defend"
import { upload } from "@/api/system/common"

	const userStore = useUserStore()
	const id = ref('')
	onLoad(async (option) => {
		if (option.id) {
			id.value = option.id
			getDetail()
		}
	})
	
	// 获取详情
	const info = ref({})
	const isLoading = ref(false)
	const getDetail = () => {
		const params = {
			id: id.value
		}
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		adviceDetail(params).then(res => {
			info.value = res.data || {}
			formData.value = {
				advice: res.data.advice,
				adviceImg: res.data.adviceImg
			}
			fileList.value = res.data.adviceImg ? res.data.adviceImg.split(',').map(item => {
				return {
					status: 'success',
					message: '上传成功',
					url: item,
					type: 'image'
				}
			}) : []
			isLoading.value = false
			uni.hideLoading()
	  }).catch(() => {
			isLoading.value = false
			uni.hideLoading()
		})
	}
	
	// 图片上传
	const fileList = ref([])
	
	// 删除图片
	const deletePic = (event) => {
	  fileList.value.splice(event.index, 1)
		formData.value.adviceImg = fileList.value.map(item => item.url).join(',')
	}
	
	// 新增图片
	const afterRead = async (event) => {
	  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	  let lists = [].concat(event.file)
	  let fileListLen = fileList.value.length
	  lists.map((item) => {
	    fileList.value.push({
	      ...item,
	      status: 'uploading',
	      message: '上传中',
	    });
	  });
	  for (let i = 0; i < lists.length; i++) {
	    const result = await upload(lists[i].url)
			const data = JSON.parse(result.data)
	    let item = fileList.value[fileListLen]
	    fileList.value.splice(fileListLen, 1, {
	      ...item,
	      status: 'success',
	      message: '',
	      url: data.url,
	    });
	    fileListLen++;
	  }
		formData.value.adviceImg = fileList.value.map(item => item.url).join(',')
	};
	
	// form表单数据
	const formData = ref({
		advice: '',
		adviceImg: ''
	})
	const formRef = ref(null)
	const formRules = ref({
		advice: {
			rules: [{ required: true, errorMessage: '请输入反馈建议' }]
		}
	})
	const isSubmit = ref(false)
	// 提交
	const submit = () => {
		formRef.value.validate().then(formRes => {
			isSubmit.value = true
			const params = { ...formRes }
			if (id.value) {
				params.id = id.value
			}
			adviceAdd(params).then(async (res) => {
				modal.showToast(res.msg)
				await uni.$u.sleep(1000)
				isSubmit.value = false
				clear()
				// uni.$emit('refreshList');  // 触发刷新事件
				uni.navigateBack({
					delta: 1
				})
			}).catch(err => {
				isSubmit.value = false
			})
		})
	}
	// 清空
	const clear = () => {
		formData.value = {
			advice: '',
			adviceImg: ''
		}
	}
</script>

<style scoped lang="scss">
	.formRef {
		padding-top: 30rpx;
	}
</style>
